<%@page contentType="text/html; charset=utf-8"%>
<%@include file="/WEB-INF/views/common/taglibs.jspf" %>
<title>系统用户管理</title>

<link rel="stylesheet" href="${ctx}/static/admin/ace/css/jquery-ui.css" />
<link rel="stylesheet" href="${ctx}/static/admin/ace/css/jquery.gritter.css" />
<link rel="stylesheet" href="${ctx}/static/admin/ace/css/datepicker.css" />
<div class="row">
	<div class="col-xs-12">
		<!-- PAGE CONTENT BEGINS -->
		<div class="row">
			<div class="col-xs-12">
				<div class="btn-group">
					<button onclick="formDialog();" class="btn btn-primary btn-sm btn-sm">
						<i class="glyphicon glyphicon-plus"></i>
						添加
					</button>
					<button class="btn btn-info btn-sm">
						<i class="ace-icon fa fa-pencil-square-o"></i>
						编辑
					</button>
					<button class="btn btn-danger btn-sm">
						<i class="ace-icon fa fa-trash"></i>
						删除
					</button>
					<button class="btn btn-success btn-sm" onclick="oTable.draw();">
						<i class="ace-icon fa fa-refresh"></i>
						刷新
					</button>
					
					
				</div>
				
				
			</div>
		</div>
		<div class="space-6"></div>
		
		<div class="row">
			<div class="col-xs-12">
				<form>
					<span class="input-icon">
						<input type="text" class="input-sm input-medium" placeholder="Search ...">
						<i class="ace-icon fa fa-search nav-search-icon blue"></i>
					</span>
					<span class="input-icon">
						<input type="text" class="date-picker input-sm input-medium" data-date-format="yyyy-mm-dd">
						<i class="ace-icon fa fa-calendar blue"></i>
					</span>
					<span class="input-icon">
						<input type="text" class="date-picker input-sm input-medium" data-date-format="yyyy-mm-dd">
						<i class="ace-icon fa fa-calendar blue"></i>
					</span>
					<span class="input-icon">
						<input type="text" placeholder="关键字" class="input-sm">
						<i class="ace-icon fa fa-filter blue"></i>
					</span>
					<button class="btn btn-purple btn-xs" onclick="oSearch();">
						<i class="ace-icon fa fa-search"></i>
						搜索
					</button>
					<button class="btn btn-pink btn-xs">
						<i class="ace-icon fa fa-share bigger-100"></i>
						重置
					</button>
					<button class="btn btn-success btn-xs" onclick="oTable.draw();">
						<i class="ace-icon fa fa-search"></i>
						刷新
					</button>
				</form>
				
			</div>
		</div>
		<div class="space-6"></div>
		
		<div class="row">
			<div class="col-xs-12">
				<table id="oTable" class="table table-striped table-bordered table-hover">
			        <thead>
			        <tr>
			            <th class="center">
							<label class="position-relative">
								<input type="checkbox" class="ace" />
								<span class="lbl"></span>
							</label>
						</th>
			            <th>序号</th>
			            <th>编号</th>
			            <th>用户名</th>
			            <th>密码</th>
			            <th>操作</th>
			        </tr>
			        </thead>
			        <tbody></tbody>
			        <!-- tbody是必须的 -->
			    </table>
				
			</div>
		</div>
		
		
		<!-- PAGE CONTENT ENDS -->
	</div><!-- /.col -->
</div><!-- /.row -->



<!--定义操作列按钮模板-->
<script id="func_tpl" type="text/x-handlebars-template">
    {{#each func}}
		<button class="btn btn-xs btn-{{this.type}}" onclick="{{this.fn}}">
			<i class="ace-icon fa fa-{{this.icon}}"></i>
				{{this.name}}
		</button>
    {{/each}}
</script>
<!-- toolbar -->
<script id="toolbar_tpl" type="text/x-handlebars-template">
	<span class="input-icon">
		<input type="text" class="date-picker input-sm input-medium" data-date-format="yyyy-mm-dd">
		<i class="ace-icon fa fa-calendar blue"></i>
	</span>
	<span class="input-icon">
		<input type="text" class="date-picker input-sm input-medium" data-date-format="yyyy-mm-dd">
		<i class="ace-icon fa fa-calendar blue"></i>
	</span>
	<span class="input-icon">
		<input type="text" placeholder="关键字" class="input-sm">
		<i class="ace-icon fa fa-filter blue"></i>
	</span>
	<button class="btn btn-purple btn-xs" onclick="oSearch();">
		<i class="ace-icon fa fa-search"></i>
		搜索
	</button>
	<button class="btn btn-pink btn-xs">
		<i class="ace-icon fa fa-share bigger-100"></i>
		重置
	</button>
	<button class="btn btn-success btn-xs" onclick="oTable.draw();">
		<i class="ace-icon fa fa-search"></i>
		刷新
	</button>
</script>

<script type="text/javascript">
var oTable, dialogIndex ;
var scripts = [null, null, null];
$('.page-content-area').ace_ajax('loadScripts', scripts, function() {
	jQuery(function($) {
		initDataTable() ;
		
	});
});

function initDataTable() {
	var func_tpl = $("#func_tpl").html();
    var func_template = Handlebars.compile(func_tpl);	 //预编译模板
    var _url = "${ctx}/admin/sys/user/datatable" ;
    
    oTable = $("#oTable").DataTable({
		processing: true,
		serverSide: true,
		order: [[2, "desc"]],
		dataType: "JSON",
		scrollCollapse: true,
		lengthMenu: [1, 3, 5, 10, 20, 100, 200, 1000],
		language: {"url": "${ctx}/static/json/dataTable-language.json"},
		ajax: _url,
		dom:	"<'#toolbar' <'float_right'f>>  " +
				"t" +
				"<'row'<'col-xs-12' <'float_left'i> "+
				"<'float_right'l><'float_right'p>> >",
		columns: [
               {"data": null, "bSortable": false},
               {"data": null, "bSortable": false},
               {"data": "id", "bSortable": true, "sDefaultContent" : ""},
               {"data": "username", "bSortable": true, "sDefaultContent" : ""},
               {"data": "password", sWidth: 500, "bSortable": true, "sDefaultContent" : ""},
               {"data": null, "bSortable": false}
		],
		columnDefs: [{
			targets: 0,
			sClass: "center",
			render: function (a, b, c, d) {
				var s = '<label class="position-relative"><input type="checkbox" class="ace" /><span class="lbl"></span></label>';
				return s;
			}
		},{
    	   "searchable": false,
    	   "orderable": false,
    	   "targets": 1
		},{
			targets: 5,
			render: function (a, b, c, d) {
				var context = {
						func: [
						       {"name": "修改", "type": "info", "icon": "pencil-square-o", "fn": "formDialog(\'" + c.id + "\')"}, 
						       {"name": "删除", "type": "danger", "icon": "trash", "fn": "del(\'" + c.id + "\')"}
						       ]
				};
				var html = func_template(context);
				return html;
			}
		}],
		initComplete: function(){
			var toolbar_tpl = $("#toolbar_tpl").html() ;
			var toolbar_template = Handlebars.compile(toolbar_tpl);
			$("#toolbar").append(toolbar_template());
			//快速搜索样式修改
			var search = $("#oTable_filter");
			search.find(":input").attr("placeholder", "快速搜索...").attr("type", "").wrap("<span class='input-icon'></span>") ;
			search.find("span").append("<i class='ace-icon fa fa-search nav-search-icon blue'></i>");
			
			$('.date-picker').datepicker({
				autoclose: true,
				todayHighlight: true
			});
		}
				
				
	});
	
	//复选框-多选
	oTable.on("click", "thead tr th input:checkbox" , function(){
		$("#oTable").toggleClass('table-striped');
		var that = this;
		$(this).closest('table').find('tr > td:first-child input:checkbox').each(function(){
			this.checked = that.checked;
			$(this).closest('tr').toggleClass('selected');
		});
	});
	//复选框-单选?
	oTable.on("click", "tbody tr td input:checkbox" , function(){
		$(this).parent("tr").toggleClass("selected") ;
	});
	
	//序号
	oTable.on("draw", function () {
		oTable.column(1, {search:'applied', order:'applied'}).nodes().each( function (cell, i){
			cell.innerHTML = i+1;
        });
	});
}

function formDialog(id){
	var url = "${ctx}/admin/sys/user/form" ;
	if(undefined != id && id != "") {
		url = "${ctx}/admin/sys/user/form?id="+id ;
	}
	var loadIndex = layer.load(0, {shade : [0.3]});
	$.ajax({
		url: url, cache:false
	}).error(function(event, XMLHttpRequest, ajaxOptions, thrownError){
		if(event.status == 404) { }
	}).done(function(result){
		dialogIndex = layer.open({
		    type: 1, //page层
		    area: ['900px', '500px'],
		    title: '添加',
		    skin: 'seaning', //墨绿风格
		    shade: 0.6, //遮罩透明度
		    shift: 2, //0-6的动画形式，-1不开启 
		    scrollbar: false, //禁用浏览器滚动条
		    content: result,
		    success: function(layero, index){ layer.close(loadIndex); },
		    btn: ['提交', '取消'],
		    yes: function(index, layero){
		    	if(undefined == id) {
		    		add() ;
		    	} else {
		    		edit() ;
		    	}
		    },cancel: function(index){}
		}); 
	});
};


function add() {
	var msgIndex = layer.msg('数据提交中...', { icon: 17, shade: [0]}); 
	var data = $.shine.serializeObject("#form");
	
	$.ajax({
		type: "POST",
		url: "${ctx}/admin/sys/user/add",
		data: data, dataType: "JSON",
	}).error(function(event, XMLHttpRequest, ajaxOptions, thrownError){
		layer.close(msgIndex);
	}).done(function(result){
		if(result.error != null  && result.error != undefined) {
			layer.msg('发生错误！', { icon: 2, time: 1000, shade: [0] }, function(){ layer.close(msgIndex); }); 
		} else {
			oTable.draw(); 
			layer.close(msgIndex);
			layer.close(dialogIndex) ;
			$.gritter.add({
				text: '<i class="ace-icon fa fa-check bigger-150"></i>&nbsp;&nbsp;&nbsp;<span class="bigger-150">'+result.message+'</span>',
				class_name: 'gritter-success'
			});
		}
	});
}

function edit() {
	var msgIndex = layer.msg('数据提交中...', { icon: 17, shade: [0]}); 
	var data = $.shine.serializeObject("#form");
	
	$.ajax({
		type: "POST",
		url: "${ctx}/admin/sys/user/update",
		data: data, dataType: "JSON",
	}).error(function(event, XMLHttpRequest, ajaxOptions, thrownError){
		layer.close(msgIndex);
	}).done(function(result){
		if(result.error != null  && result.error != undefined) {
			layer.msg('发生错误！', { icon: 2, time: 1000, shade: [0] }, function(){ layer.close(msgIndex); }); 
		} else {
			oTable.draw(); 
			layer.close(msgIndex);
			layer.close(dialogIndex) ;
			$.gritter.add({
				text: '<i class="ace-icon fa fa-check bigger-150"></i>&nbsp;&nbsp;&nbsp;<span class="bigger-150">'+result.message+'</span>',
				class_name: 'gritter-success'
			});
		}
	});
}

function del(id) {
	bootbox.confirm("你确定要删除吗?", function(result) {
		if(result) {
			$.ajax({
				type: "GET", dataType: "JSON",
				url: "${ctx}/admin/sys/user/delete/"+id,
			}).error(function(event, XMLHttpRequest, ajaxOptions, thrownError){
				layer.msg('删除发生错误！', { icon: 2, time: 1000, shade: [0] }); 
			}).done(function(result){
				if(result.error != null  && result.error != undefined) {
					layer.msg('删除发生错误！', { icon: 2, time: 1000, shade: [0] }); 
				} else {
					oTable.draw(); 
					$.gritter.add({
						text: '<i class="ace-icon fa fa-check bigger-150"></i>&nbsp;&nbsp;&nbsp;<span class="bigger-150">'+result.message+'</span>',
						class_name: 'gritter-success'
					});
				}
			});
		}
	});
}

function oSearch() {
	oTable.draw();
}

</script>
